<template>
          <view class="myshopcard" @tap="toDetail">

                                <view class="pic">
                                        <image :src="d.cardPicture" mode="aspectFill" />
                                </view>
                                <view class="body">
                                        <view class="ul">
                                            <view class="top">
                                                <view class="n">
                                                <!-- <view class="i">积分</view> -->
                                               {{d.cardName}}
                                                </view>  

                                                <view class="center">
                                                    <view class="left sales" v-if="d.cardSales">已售{{d.cardSales || 0}}件</view>    
                                                    <view class="right">￥{{d.cardPrice}}</view>
                                                </view> 
                                            </view>
                                            <view class="bottom">
                                                     <image :src="d.salonPicture" mode="aspectFill" v-if="d.salonPicture" />
                                                      <image src="/static/images/meiye_head.png" mode="aspectFit" v-else  />
                                                    {{d.salonName}}
                                            </view>

                                        </view>
                                </view>

                        </view>
</template>
<script>

export default {
        props:{
            d:{
                type:Object,
                default:{}
            }
        },
        methods:{
            toDetail(){
                let { cardId } = this.d;
                uni.navigateTo({
                    url: `/detailPackages/pages/beautyDetail/index?cid=${cardId}`
                })
            }
        }
}
</script>
<style lang="scss">

%myShopName{
    font-size: 28rpx;
    color: #333;
    line-height: 32rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height:64rpx;
}

%shopTarget{
  
    display: inline-block;  
    width: 60rpx;
    height: 28rpx;
    line-height:28rpx;
    text-align: center;
    font-size: 22rpx;
    background: #FF3333;
    color:#fff;
    margin-right: 5rpx;
    border-radius:8rpx 8rpx 0rpx 8rpx;
    overflow: hidden;
}

   .myshopcard{
       
            display: flex;
            margin-bottom: 30rpx;
            
        

        .pic{
            width: 200rpx;
            height: 200rpx;
            border-radius: 15rpx;
            overflow: hidden;
            background: #fff;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .body{
            margin-left: 20rpx;
            width: 450rpx;
        }
        .ul{
            height: 200rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding:10rpx 0;
            box-sizing: border-box;
        }
        .n{
            @extend %myShopName;
            width: 400rpx;
            margin-bottom:15rpx;
        }
        .i{
            @extend %shopTarget;
        }
        .center{
            overflow: hidden;
            font-size:24rpx;
        }
        .left{
            float:left;
            color:#666;
        }
        .right{
            float:right;
            color:#FF3333;
            font-size: 30rpx;
        }
        .bottom{
                font-size: 24rpx;
                color:#999;
                line-height: 40rpx;
                image{
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 30rpx;
                    vertical-align: top;
                    margin-right: 10rpx;
                }
                
        }
   }
</style>